<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div class="demoTable">
    搜索楼号：
    <div class="layui-inline">
        <input class="layui-input" name="id" id="demoReload" autocomplete="off">
    </div>
    <button class="layui-btn" data-type="reload" id="searchBtn">搜索</button>
    <button class="layui-btn" data-type="reload" id="addBtn">添加</button>
    <button class="layui-btn" data-type="reload" id="qxBtn">查看全部</button>

</div>

<table class="layui-hide" id="demo" lay-filter="test"></table>

<script type="text/html" id="barDemo">
    <!--<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>-->

    {{# if(d.buildingStatus == 0){ }}
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">禁用</a>
    {{# } }}
    {{# if(d.buildingStatus == 1){ }}
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delq">启用</a>
    {{# } }}

</script>

<script>
    layui.use([ 'laypage', 'layer', 'table'], function() {
            var laypage = layui.laypage //分页
                , layer = layui.layer //弹层
                , table = layui.table;//表格


            //执行一个 table 实例
            table.render({
                elem: '#demo'
                , height: 550
                , url: 'gloulistDate' //数据接口
                , title: '用户表'
                , page: true //开启分页
                , toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板
                , limits: [5, 10, 15]

                , cols: [
                    [ //表头
                        {type: 'checkbox', fixed: 'left'}

                        , {field: 'buildingID', title: '编号', width: 80, sort: true}
                        , {field: 'buildingName', title: '楼号', width: 150}
                        , {field: 'loucengCount', title: '总楼层', width: 90, sort: true}
                        , {field: 'buildingStatus', title: '状态', width: 90, sort: true}
                        , {fixed: 'right', width: 165, align: 'center', toolbar: '#barDemo'}
                    ]
                ]
                , id: 'gloulistDate',
                done:function (res,curr,count) {
                    $("[data-field='buildingStatus']").children().each(function () {
                        if($(this).text()==1){
                            $(this).text('已禁用');
                        }
                        if($(this).text()==0){
                            $(this).text('已启用');

                        }
                    })
                }

            });
        //监听行工具事件
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            //修改
            if(layEvent === 'edit'){
                layer.open({
                    type: 2, //layer的5种层类型   0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                    title: ['修改数据', 'font-size:18px;'],  //弹出框标题
                    shade: [0.5, '#393D49'],     //遮罩层
                    shadeClose:true,          //点击遮罩层外区域关闭遮罩层
                    area: ['580px', '500px'],    //弹出框大小
                    anim: 1,              //弹出动画
                    content:'selbuildingid?buildingid='+data.buildingID
                });
            }
            //删除
            if(layEvent === 'del'){
                //操作
                layer.confirm('真的要禁用吗？', function () {
                    $.post("delLou",{'buildingid':data.buildingID},function(result)
                        {
                            layer.msg(
                                result.msg, {
                                    icon: 1,
                                    time: 1000 //2秒关闭（如果不配置，默认是3秒）
                                }, function(){
                                    //刷新父页面
                                    location.reload();
                                });
                        }
                    );
                });
            }
            //删除
            if(layEvent === 'delq'){
                //操作
                layer.confirm('真的要启用吗？', function () {
                    $.post("delqLou",{'buildingid':data.buildingID},function(result)
                        {
                            layer.msg(
                                result.msg, {
                                    icon: 1,
                                    time: 1000 //2秒关闭（如果不配置，默认是3秒）
                                }, function(){
                                    //刷新父页面
                                    location.reload();
                                });
                        }
                    );
                });
            }
        });
        //分页
        laypage.render({
            elem: 'pageDemo' //分页容器的id
            , count: 100 //总页数
            , skin: '#1E9FFF' //自定义选中色值
            //,skip: true //开启跳页
            , jump: function (obj, first) {
                if (!first) {
                    layer.msg('第' + obj.curr + '页', {offset: 'b'});
                }
            }
        });

        //执行条件查询
        /*条件查询按钮*/
        var $ = layui.$;
        $('#searchBtn').on('click', function () {
            //获取输入框
            var demoReload = $('#demoReload');
            //执行重载
            table.reload('gloulistDate', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                , where: {
                    buildingname: demoReload.val()
                }
            });
        });
        //新增
        $("#addBtn").on('click',function () {
            layer.open({
                type:2,      //layer的5种层类型   0（信息框，默认）、1（页面层）、2（iframe层）、3（加载层）、4（tips层）
                title: ['新增', 'font-size:18px;'],  //弹出框标题
                area: ['800px','350px'],    //设置弹框的大小
                shadeClose:true,          //点击遮罩层外区域关闭遮罩层
                anim: 2,              //弹出动画
                content:'addglou'     //写方法的路径  进入页面  此处也和easyui相同
            })
        })
        //    取消查询
        var $ = layui.$;
        $('#qxBtn').on('click', function(){
            window.location.reload();
        });
        });
    </script>

</body>
</html>